<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1034 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M940.032 944.814H90.798c-40.622 0-73.728-33.116-73.728-73.728V292.864c0-40.622 33.106-73.728 73.728-73.728H940.37c40.622 0 73.728 33.106 73.728 73.728v578.56c-.338 40.622-33.792 73.39-74.066 73.39zM90.798 260.096a32.768 32.768 0 0 0-32.768 32.768v578.222a32.768 32.768 0 0 0 32.768 32.768h849.234c18.094 0 32.768-14.684 33.106-32.768V292.864a32.768 32.768 0 0 0-32.768-32.768H90.798zm619.172-44.032c-5.458 0-10.578-2.048-14.674-6.144l-88.75-90.112H424.274l-88.74 90.112c-7.854 8.192-20.828 8.192-29.02.338-8.192-7.844-8.192-20.818-.338-29.01l90.45-91.822c6.83-6.82 15.708-10.578 24.924-10.578h187.73c9.216 0 18.094 3.758 24.576 10.578l90.45 91.822c7.854 8.192 7.854 21.166-.338 29.01a19.917 19.917 0 0 1-13.998 5.806z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M564.224 758.098h-97.28c-7.854 0-14.336-6.482-14.336-14.336v-98.304h-98.642c-7.854 0-14.336-6.482-14.336-14.336v-97.618c0-7.854 6.482-14.336 14.336-14.336h98.642v-98.304c0-7.854 6.482-14.336 14.336-14.336h97.28c7.854 0 14.336 6.482 14.336 14.336v97.966h98.642c7.854 0 14.336 6.482 14.336 14.336v97.618c0 7.854-6.482 14.336-14.336 14.336H578.56v98.304c0 8.192-6.482 14.674-14.336 14.674z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Iconc4 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
